<template>
  <div>
    <el-card class="box-card">
      <div>
        <el-alert
          show-icon
          title="注意:只允许第三级分类设置相关参数!"
          type="warning"
          effect="dark"
        >
        </el-alert>
      </div>
      <div>
        <div class="SelectClassify">
          <!-- 选择商品分类:{{ selectKeys }} -->
          <el-cascader
            ref="refid"
            class="cascader"
            v-model="selectKeys"
            :options="options"
            :props="show"
            @change="ChangeSelect"
          ></el-cascader>
        </div>
        <div class="table">
          <el-tabs
            type="border-card"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane label="动态参数" name="many">
              <div class="button">
                <el-button
                  type="primary"
                  size="mini"
                  :disabled="isok"
                  @click="add"
                  >添加参数</el-button
                >
              </div>
              <div>
                <el-table :data="AddParameters" style="width: 100%" border>
                  <el-table-column type="expand">
                    <template slot-scope="scope">
                      <el-tag
                        v-for="(item, index) in scope.row.attr_vals"
                        :key="index"
                        closable
                        v-show="item != ''"
                        :disable-transitions="false"
                        @close="handleClose(index, scope.row)"
                      >
                        {{ item }}
                      </el-tag>
                      <el-input
                        class="input-new-tag"
                        v-if="scope.row.inputVisible"
                        v-model="scope.row.inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm(scope.row)"
                      >
                      </el-input>
                      <el-button
                        v-else
                        class="button-new-tag"
                        size="small"
                        @click="showInput(scope.row)"
                        >+ New Tag</el-button
                      >
                    </template>
                  </el-table-column>
                  <el-table-column label="#" type="index"> </el-table-column>
                  <el-table-column label="参数名称" prop="attr_name">
                  </el-table-column>
                  <el-table-column label="操作" prop="desc">
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        icon="el-icon-edit"
                        size="mini"
                        @click="edit(scope.row)"
                        >编辑</el-button
                      >
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        @click="Delete(scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="静态参数" name="only">
              <div class="button">
                <el-button
                  type="primary"
                  size="mini"
                  :disabled="isok"
                  @click="add"
                  >添加属性</el-button
                >
              </div>
              <div>
                <el-table :data="AddProperty" style="width: 100%" border>
                  <el-table-column type="expand">
                    <template slot-scope="scope">
                      <el-tag
                        v-for="(item, index) in scope.row.attr_vals"
                        :key="index"
                        closable
                        v-show="item != ''"
                        :disable-transitions="false"
                        @close="handleClose(index, scope.row)"
                      >
                        {{ item }}
                      </el-tag>
                      <el-input
                        class="input-new-tag"
                        v-if="scope.row.inputVisible"
                        v-model="scope.row.inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.stop.native="handleInputConfirm(scope.row)"
                        @blur="handleInputConfirm(scope.row)"
                      >
                      </el-input>
                      <el-button
                        v-else
                        class="button-new-tag"
                        size="small"
                        @click="showInput(scope.row)"
                        >+ New Tag</el-button
                      >
                    </template>
                  </el-table-column>
                  <el-table-column label="#" type="index"> </el-table-column>
                  <el-table-column label="属性名称" prop="attr_name">
                  </el-table-column>
                  <el-table-column label="操作" prop="desc">
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        icon="el-icon-edit"
                        size="mini"
                        @click="edit(scope.row)"
                        >编辑</el-button
                      >
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        @click="Delete(scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
          <!-- 编辑弹框 -->
          <el-dialog
            title="修改动态参数"
            :visible.sync="EditDialogVisible"
            width="50%"
          >
            <span>
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="动态传参" prop="name">
                  <el-input v-model="ruleForm.attr_name"></el-input>
                </el-form-item>
              </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="EditDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="DetermineEdit">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 添加参数弹框 -->
          <el-dialog
            title="添加动态参数"
            :visible.sync="dialogVisible"
            width="30%"
          >
            <span>
              <el-form
                :model="from"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
                :rules="rules"
              >
                <el-form-item label="动态参数" prop="name">
                  <el-input v-model="from.attr_name"></el-input>
                </el-form-item>
              </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="AddDetermine">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  GoodsClassify,
  ParameterListAPI,
  DeleteParameter,
  EditParameter,
  AddParameter,
} from "../../http/api";
export default {
  data() {
    return {
      activeName: "many",
      selectKeys: [],
      options: [],
      show: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id",
        children: "children",
      },

      AddParameters: [], //动态参数
      AddProperty: [], //静态参数
      id: "",
      EditDialogVisible: false,
      dialogVisible: false,
      rules: {
        attr_name: [
          { required: true, message: "参数名称不能为空", trigger: "blur" },
        ],
      },
      ruleForm: {
        attr_vals: "",
        attr_sel: [],
        attr_name: "",
      },
      from: {
        attr_name: "",
        attr_sel: [],
      },
    };
  },
  created() {
    this.GoodsList();
  },
  methods: {
    async GoodsList() {
      //请求商品分类列表 级联
      const res = await GoodsClassify();
      this.options = res;
    },
    handleClick() {
      this.getParameterList();
    },
    // 改变tag标签并获取更新参数列表
    ChangeSelect() {
      console.log(this.selectKeys);
      this.getParameterList();
    },
    // 获取参数列表
    async getParameterList() {
      this.id = this.selectKeys[this.selectKeys.length - 1];
      const res = await ParameterListAPI(this.id, { sel: this.activeName });
      res.forEach((item) => {
        item.attr_vals = item.attr_vals.split(",");
        item.inputVisible = false;
        item.inputValue = "";
        this.attr_vals = item.attr_vals;
        console.log(item);
      });
      console.log(this.from);
      if (this.activeName === "many") {
        this.from.attr_sel = "many";
        this.AddParameters = res;
      } else {
        this.from.attr_sel = "only";
        this.AddProperty = res;
      }
    },
    // 删除
    async Delete(row) {
      console.log(row);
      let id = row.cat_id; //分类id
      let attrId = row.attr_id; //属性id
      console.log(attrId, id);
      const res = await DeleteParameter(id, attrId);
      console.log(res);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.getParameterList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑
    edit(row) {
      this.EditDialogVisible = true;
      console.log(row);
      this.id = row.cat_id;
      this.attr_id = row.attr_id;
      this.ruleForm = row;
      console.log(this.id, this.attr_id);
      // console.log(this.ruleForm);
    },
    //确认编辑
    DetermineEdit() {
      EditParameter(this.id, this.attr_id, this.ruleForm).then((res) => {
        console.log(res);
        this.GoodsList();
        this.EditDialogVisible = false;
        this.$message({
          message: "更新成功",
          type: "success",
        });
      });
    },
    // 删除
    async handleClose(i, row) {
      console.log(row);
      row.attr_vals.splice(i, 1);
      const res = await EditParameter(row.cat_id, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.activeName,
        attr_vals: row.attr_vals.join(","),
      });
      console.log(res);
      this.GoodsList();
    },
    //tag格子输入
    showInput(row) {
      console.log(row);
      row.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //在tag里进行添加
    async handleInputConfirm(row) {
      row.inputVisible = false;
      if (row.inputValue.length > 0) {
        row.attr_vals.push(row.inputValue);
      } //编辑分类参数接口
      const res = await EditParameter(row.cat_id, row.attr_id, {
        attr_name: row.attr_name, //属性的名字
        attr_sel: this.activeName, //属性的类型
        attr_vals: row.attr_vals.join(","), //属性值
      });
      console.log(res);
      this.getParameterList();
    },
    // 添加参数
    add() {
      this.dialogVisible = true;
      console.log(this.from.attr_sel);
    },
    async AddDetermine() {//分类id
      const res = await AddParameter(this.id, this.from); //添加分类参数接口
      console.log(res);
      this.getParameterList();
      this.dialogVisible = false;
      this.$message({
        message: "创建成功",
        type: "success",
      });
      this.from = {};
    },
  },
  // 用计算属性来 判断是否3级 如果不等3级就按钮禁用
  computed: {
    isok() {
      if (this.selectKeys.length === 3) {
        return false;
      }
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.SelectClassify {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 15px;
}
.cascader {
  margin-left: 10px;
}
.button {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.table {
  margin-top: 15px;
}
.el-tag {
  margin: 10px;
}
.input-new-tag {
  width: 80px;
}
</style>